<template>
<div class="container__">
    <swiper :imgUrls="banner"></swiper>
    <div class="infobox">
        <div class="top">
            <img :src="info.avatar" alt="">
            <span>{{info.nickname}}</span>
        </div>
        <div class="bottom">
           <div class="left">
                <div>
                    <van-icon class="icon_name" name="comment-o" /><span>认证：</span>
                    <span v-if="!info" class="renzheng">去认证</span>
                    <span v-if="info&&info.is_auth==0" class="renzheng" @click="renzheng">去认证</span>
                    <span v-if="info&&info.is_auth==1" class="renzheng" @click="renzheng">审核中</span>
                    <span v-if="info&&info.is_auth==2" class="renzheng">认证失败</span>
                    <span v-if="info&&info.is_auth==3&&info.role==1" class="renzheng">家长</span>
                    <span v-if="info&&info.is_auth==3&&info.role==2" class="renzheng">老师</span>
                    <span v-if="info&&info.is_auth==3&&info.role==3" class="renzheng">公司</span>
                    <span v-if="info&&info.is_auth==3&&info.role==4" class="renzheng">媒体</span>
                    <span v-if="info&&info.is_auth==3&&info.role==5" class="renzheng">其他</span>
                    <span v-if="info&&info.is_auth==3&&info.role==6" class="renzheng">本地学校</span>
                </div>
                <div>
                    <van-icon class="icon_name" name="location-o" /><span>位置：</span><span v-if="info&&info.area">{{info.area}}</span><span v-else>暂时没有设置</span></div>
                <div>
                    <van-icon class="icon_name" name="description" /><span>简介：</span><span v-if="info&&info.brief">{{info.brief}}</span><span v-else>暂时没有设置</span></div>
            </div>
        </div>
    </div>
    <div class="patabox" v-for="(item, index) in tixianlist" :key="index">
        <van-cell use-label-slot :border="false">
            <view class="title" slot="title">￥{{item.price}}</view>
            <view class="lable" slot="label"><img :src="item.icon" alt=""><span>{{item.title}}</span></view>
            <view class="value">
                <van-button type="primary" round size="small" @click="routerTo(item)">立即查看</van-button>
            </view>
        </van-cell>
    </div>
    <div class="que" v-show="isempty">
        <img :src="imgurl+'/que/no_conten@2x.png'" alt="">
      </div>
</div>
</template>

<script>
import swiper from "@/components/swiper";
import {indexads} from '@/api/index'
import {pataner} from '@/api/my'
export default {
    components: {
        swiper
    },
    data() {
        return {
            banner: [],
            tixianlist: [],
            info:{},
            zip:0,
            isempty:false,
            imgurl: this.$URL.imgurl,
        }
    },
    methods: {
        routerTo(item) {
            wx.setStorage({
                key: "pataner",
                data: item
            })
            wx.navigateTo({
                url: '/pages/pataDetails/main?id='+item.id
            })
        },
        renzheng() {
            wx.navigateTo({
                url: '/pages/Authentication/main'
            })
        },
        getlist() {
            this.isempty=false
            pataner().then(res => {
                if(res.code==200){
                    this.tixianlist = res.data
                }else if(res.code==201){
                    this.isempty=true
                }
                
            })
        },
        getads(spaceid){
            indexads({spaceid:spaceid,zip:this.zip}).then(res=>{
                this.banner=res.data
            })
        },
    },
    created() {

    },
    onLoad() {
        Object.assign(this.$data, this.$options.data())
        this.getlist()
        if (!wx.getStorageSync('user_info')) return
        this.info = wx.getStorageSync('user_info')
        this.zip=wx.getStorageSync("qcode");
        this.getads(9)
    },

}
</script>

<style lang="scss">

.que {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;

    img {
        height: 170px;
        width: 228px;
    }
}
.container__ {
    background-color: #fff;
    min-height: 100vh;
    font-size: 16px;
    padding: 0 0 15px 0;
    box-sizing: border-box;

    .infobox {
        width: 345px;
        height: 162px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius: 5px;
        margin: 11px auto 26px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .top {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 15px;
            box-sizing: border-box;

            img {
                width: 52px;
                height: 52px;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid rgba(26, 132, 251, 1);
            }

            span {
                font-size: 16px;
                font-weight: bold;
                color: rgba(26, 132, 251, 1);
                margin-left: 10px;
            }
        }
    }

    .patabox {
        width: 345px;
        height: 86px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(221, 221, 221, 1);
        margin: 0 auto 15px;
        box-sizing: border-box;
        padding: 0 20px 0 40px;

        .van-cell {
            height: 84px;
            align-items: center;
            box-sizing: border-box;
            padding: 0;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 16px
        }

        .lable {
            font-size: 15px;
            font-weight: bold;
            color: rgba(233, 181, 94, 1);

            img {
                height: 19px;
                width: 19px;
                margin-right: 7px;
                vertical-align: bottom;
            }
        }

        .van-button {
            background-color: #1A84FB;
            border: 0;
        }
    }

    .bottom {
              padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            height: 58px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);

            .icon_name {
                margin-right: 11px;
                font-size: 12px;
            }

            .renzheng {
                width: 59px;
                height: 19px;
                background: rgba(234, 243, 255, 1);
                border: 1px solid rgba(26, 132, 251, 1);
                border-radius: 3px;
                color: rgba(26, 132, 251, 1);
            }
        }
    }
}
</style>
